<!DOCTYPE html>

<!-- $Id: slider.html 30 2012-07-26 12:11:26Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<title>slider</title>

<link href="960c12.css" rel="stylesheet" type="text/css"/>

<link href="http://dl.dropbox.com/u/68550731/red-sparkle/red.sparkle.min.css" rel="stylesheet" type="text/css"/> 
<!--[if IE]><link href="http://dl.dropbox.com/u/68550731/red-sparkle/red.sparkle.ie.min.css" rel="stylesheet" type="text/css"/><![endif]-->

<link href="../release/themes/grey.min.css" rel="stylesheet" type="text/css"/> 

<script src="http://code.jquery.com/jquery.min.js" charset="utf-8" type="text/javascript"></script>
<script src="../release/jquery.ys.min.js"></script>

<style>

body { margin: 1em; }

</style>

<script>

$(document).ready(function () {

	$.ys.slider.create('.ex1', {
		value: 0.5,
		onchange: function (val, $slider) {
			$('#ex1').text(val.toFixed(2))
		}
	})

	$.ys.slider.create('.ex2', {
		min: 100,
		max: 500,
		value: 250,
		onchange: function (val, $slider) {
			$('#ex2').text(val.toFixed(2))
		}
	})

	$.ys.slider.create('.ex3', {
		orientation: 'vertical',
		onchange: function (val, $slider) {
			
		}
	})

	$.ys.slider.create('.ex4', {
		orientation: 'horizontal',
		onchange: function (val, $slider) {
			
		}
	})

	$.ys.slider.create('.ex5', {
		orientation: 'vertical',
		onchange: function (val, $slider) {
			
		}
	})
})

</script>

</head>

<body>

	<table class="layout form">
		<tr>
			<th>Slider #1: minimal value is 0, maximal is 1, initial is 0.5, current is <span id="ex1"></span>:</th>
			<td><div class="ex1 ys-slider"></div></td>
		</tr>
		<tr>
			<th>Slider #2: minimal value is 100, maximal is 500, initial is 250, current is <span id="ex2"></span>:</th>
			<td><div class="ex2 ys-slider"></div></td>
		</tr>
	</table>
	<hr/>
	<div class="ex3 ys-scrollbar-vertical"></div>
	<hr/>
	<div class="ex4 ys-scrollbar-horizontal"></div>
	<hr/>
	<div class="ex5 ys-scrollbar-vertical">
		<div class="track-piece"></div>
		<div class="thumb"></div>
		<div class="track"></div>
	</div>

</body>